<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<script src="js/jquery.js" type="text/javascript"></script>
	<script src="js/bootstrap.js" type="text/javascript"></script>
	<script type="text/javascript" src="js/fastclick-jquery.js"></script>
	<script src="js/iscroll.js" type="text/javascript"></script>
	<script src="js/sweetalert-dev.js" type="text/javascript"></script>
	<title>交易记录详情</title>
</head>
<body>
	<header>
		<a href="javascript:void(0)" onclick="javascript:history.go(-1)" class="myleft"><i class=" glyphicon glyphicon-menu-left"></i>返回</a>
		<h3>查询明细</h3>
		<span class="myicon glyphicon glyphicon-option-horizontal" aria-hidden="true"></span>
	</header>
	<div class="container"> 
		<div class="row type-row">
			<div class="col-xs-4 col-md-4"><p>交易金额(元)</p></div>
			<div class="col-xs-4 col-md-4"><p>交易类型</p></div>
			<div class="col-xs-4 col-md-4"><p>余额(元)</p></div>
		</div>
		<div id="wrapper" style="position: absolute;width: 100%;left: 0;">
			
			<!-- <p class="not-money" style="display:none;">暂无交易记录</p> -->
			<ul class="list-group ul-list" style="margin-bottom: 0">
<!-- 		    	<li class="list-group-item" id="list">
			    	<div class="row type-row list-row">
						<div class="col-xs-4 col-md-4"><p class="money-out">-8元</p></div>
						<div class="col-xs-4 col-md-4"><p>提现手续费</p></div>
						<div class="col-xs-4 col-md-4"><p>0.2元</p></div>
					</div>
					<div class="row type-row list-row list-user">
						<div class="col-xs-4 col-md-4"><p class="user-name">admin</p></div>
						<div class="col-xs-8 col-md-8"><p class="user-time">2018-01-06 15:42:36<span class="glyphicon"></span></p></div>
					</div>
					<div class="divbox">
						<p class="words-left">业务摘要：</p> <p class="words-right">消费</p>
						<p class="words-left">交易场所：</p> <p class="words-right">牛津堂</p>
						<p class="words-left">交易金额：</p> <p class="words-right">8元</p>
						<p class="words-left">可用金额：</p> <p class="words-right">0.2元</p>
						<p class="words-left">冻结金额：</p> <p class="words-right">0元</p>
						<p class="words-left">余额：</p> <p class="words-right">0.2元</p>
						<p class="words-left">交易币种：</p> <p class="words-right">人民币</p>
						<p class="words-left">交易流水号：</p> <p class="words-right">23390847</p>
					</div>
		    	</li> -->
		    </ul>
		    <div class="loading" id="PullUp">
				<!-- <span class="glyphicon glyphicon-refresh"></span>
				<p class="pullUpLabel">正在加载数据</p> -->
			</div>
		</div>
	</div>
</body>

<script>

var page1 =	{pageNo:0,pageSize:10,pageData:[
	{id:1,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:2,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'-8',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
	{id:3,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'-3065',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:4,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:5,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'888',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:6,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:7,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:8,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'360',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:9,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:10,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'} 
	
	]

}

var page2 =	{pageNo:1,pageSize:10,pageData:[
	{id:11,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:12,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
	{id:13,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'-760',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:14,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
	{id:15,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-530',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:16,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:17,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:18,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'-1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:19,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
	{id:20,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'} 
	]

}
		
		var items_per_page = 10;
        var scroll_in_progress = false;
        var myScroll; 
		var pageNo = 0; //初始化，默认加载页数
		function myLoadContent(){
			 
			if(pageNo=='end'){
				return;
			}
			if(pageNo == 1){
				page = page1;
				list = page.pageData;
				renderRow(list);
				$('#wrapper').css('left',0);
				console.log(list.length,page);
				if(list.length >= items_per_page){
					//初始化scoller
					initScoller();
					myScroll.refresh();
				}else{
					$('#PullUp').hide(); 
				}	
			}
			
			if(pageNo == 2){
				page = page2;
				list = page.pageData;
				renderRow(list);
			}


			if(pageNo >=3){
				pageNo='end';
				$('#PullUp').hide();
				alert('没有更多数据了');
				return;
			}
		}

		function renderRow(list){
			for(var i=0;i<list.length;i++){
					var item = list[i];
					var amount = parseInt(item.amount);

					if (amount >= 0) {
						$('#wrapper > ul').append('<li class="list-group-item"><div class="row type-row list-row"><div class="col-xs-4 col-md-4"><p class="money-in">+'+item.amount+'元</p></div><div class="col-xs-4 col-md-4"><p>'+item.action+'</p></div><div class="col-xs-4 col-md-4"><p>0.2元</p></div></div><div class="row type-row list-row list-user"><div class="col-xs-4 col-md-4"><p class="user-name">admin</p></div><div class="col-xs-8 col-md-8"><p class="user-time">'+item.createdAt+'<span class="glyphicon"></span></p></div></div><div class="divbox"><p class="words-left">业务摘要：</p> <p class="words-right">'+item.remark+'</p><p class="words-left">交易场所：</p> <p class="words-right">牛津堂</p><p class="words-left">交易金额：</p> <p class="words-right">8元</p><p class="words-left">可用金额：</p> <p class="words-right">0.2元</p><p class="words-left">冻结金额：</p> <p class="words-right">0元</p><p class="words-left">余额：</p> <p class="words-right">0.2元</p><p class="words-left">交易币种：</p> <p class="words-right">人民币</p><p class="words-left">交易流水号：</p> <p class="words-right">23390847</p></div></li>');
					}else{
						$('#wrapper > ul').append('<li class="list-group-item"><div class="row type-row list-row"><div class="col-xs-4 col-md-4"><p class="money-out">'+item.amount+'元</p></div><div class="col-xs-4 col-md-4"><p>'+item.action+'</p></div><div class="col-xs-4 col-md-4"><p>0.2元</p></div></div><div class="row type-row list-row list-user"><div class="col-xs-4 col-md-4"><p class="user-name">admin</p></div><div class="col-xs-8 col-md-8"><p class="user-time">'+item.createdAt+'<span class="glyphicon"></span></p></div></div><div class="divbox"><p class="words-left">业务摘要：</p> <p class="words-right">'+item.remark+'</p><p class="words-left">交易场所：</p> <p class="words-right">牛津堂</p><p class="words-left">交易金额：</p> <p class="words-right">8元</p><p class="words-left">可用金额：</p> <p class="words-right">0.2元</p><p class="words-left">冻结金额：</p> <p class="words-right">0元</p><p class="words-left">余额：</p> <p class="words-right">0.2元</p><p class="words-left">交易币种：</p> <p class="words-right">人民币</p><p class="words-left">交易流水号：</p> <p class="words-right">23390847</p></div></li>');
					}
			}

			$('.container ul.ul-list li.list-group-item').on('click',function(){
				$(this).find('.divbox').fadeToggle();
				$(this).find('.glyphicon').toggleClass("glyphicon-menu-up");
			});

		}
		function initScoller(){
			pullUpEl = document.querySelector('#PullUp');
            if (pullUpEl) {
                pullUpOffset = pullUpEl.offsetHeight;
            } else {
                pullUpOffset = 0;
            }
			var  offset = pullUpOffset;
			myScroll = new IScroll('#wrapper', {
                probeType: 1,
                tap: false,
                click: true,
                preventDefaultException: {tagName: /.*/},
                scrollbars: true,
                fadeScrollbars: true,
                interactiveScrollbars: true,
                keyBindings: false,
                deceleration: 0.0002,
                startY: (parseInt(offset) * (-1))
            });

            myScroll.on('scrollStart', function () {
                scroll_in_progress = true;
                scrollbars=true;
            });

            myScroll.on('scroll', function () {
				if(pageNo == 'end'){
						$('#PullUp').html('没有更多数据了...');
						return;
				}

                scroll_in_progress = true;
				console.log("this.y="+this.y+";this.maxScrollY="+this.maxScrollY);
				var testF1 = (this.y <= (this.maxScrollY + 100));
				var testF2 = !pullUpEl.className.match('loading');
				 
				 var r = testF1 && pullUpEl &&  testF2 ;
				console.log("testF1="+testF1+";testF2="+testF2+";r="+r);
					if(r) {
                        $('#PullUp').addClass('loading').html('<span class="glyphicon glyphicon-refresh"></span><p class="pullUpLabel">正在加载数据</p>');
						
						pageNo ++;
						myLoadContent();
                       // pullUpAction();
                    }
            });


            myScroll.on('scrollEnd', function () {
                console.log('scroll ended');
                setTimeout(function () {
                    scroll_in_progress = false;
                }, 1000);
                $(pullUpEl).css('line-height','35px');
                $(pullUpEl).css('text-align','center');
				$(pullUpEl).removeClass('loading').html('上拉加载更多');
 
            });
		
		}
	 	

	 	loaded();
        
		//初始化数据
        function loaded() {
			pageNo = 1;
			myLoadContent();

        }

        document.addEventListener('touchmove', function (e) {
            e.preventDefault();
        }, false);


</script>
</html>